import React, { Component } from 'react';
import styled from 'styled-components/native';

import { colors, fakerAvatar } from '../../utils/constants';

const AVATAR_SIZE = 48;
const AVATAR_RADIUS = AVATAR_SIZE / 2;
const DOT_SIZE = 8;
const DOT_RADIUS = DOT_SIZE / 2;

const Root = styled.View`
  flexDirection: row;
  width: 100%;
  backgroundColor: ${colors.WHITE};
`;

const Avatar = styled.Image`
  width: ${AVATAR_SIZE};
  height: ${AVATAR_SIZE};
  borderRadius: ${AVATAR_RADIUS};
  marginLeft: 10;
  marginRight: 10;
  marginTop: 10;
  marginBottom: 10;
`;

const Content = styled.View`
  flex: 1;
  flexDirection: row;
  borderBottomWidth: ${props => props.isLast ? 0 : 1};
  borderColor: ${colors.HR};
`;

const Center = styled.View`
  flex: 1;
  justifyContent: center;
`;

const Title = styled.Text`
  fontSize: 18;
  color: ${colors.PRIMARY_TEXT};
  marginTop: 10;
`;

const Des = styled.Text`
  fontSize: 16;
  color: ${colors.PRIMARY_TEXT_LITE};
  marginTop: 5;
  marginBottom: 10;
`;

const SideContent = styled.View`
  justifyContent: flex-start;
  alignItems: center;
  marginHorizontal: 10;
  marginVertical: 10;
`;

const DateText = styled.Text`
  fontSize: 14;
  color: ${colors.PRIMARY_TEXT_LITE};
  marginBottom: 8;
`;

const NewMsgCount = styled.View`
  minWidth: 22;
  backgroundColor: ${colors.NEW_MSG_BACKGROUND_COLOR};
  paddingLeft: 5;
  paddingRight: 5;
  paddingTop: 2;
  paddingBottom: 2;
  borderRadius: 11;
  alignItems: center;
  justifyContent: center;
`;

const NewMsgText = styled.Text`
  fontSize: 12;
  color: ${colors.WHITE};
`;

const NewMsgDot = styled.View`
  width: ${DOT_SIZE};
  height: ${DOT_SIZE};
  borderRadius: ${DOT_RADIUS};
  backgroundColor: ${colors.NEW_MSG_BACKGROUND_COLOR};
`;

class ChatConversationItem extends Component {
  render() {
    const { avatar, title, des, createDate, message, hasV, isLast } = this.props;

    return (
      <Root>
        <Avatar source={{ uri: avatar || fakerAvatar }} />
        <Content isLast={isLast}>
          <Center>
            <Title>{title || '标题'}</Title>
            <Des>{des || '简介'}</Des>
          </Center>
          <SideContent>
            <DateText>{createDate || '00:00'}</DateText>
            {
              (message && message.display === 'number') && <NewMsgCount><NewMsgText>{message.count}</NewMsgText></NewMsgCount>
            }
            {
              (message && message.display === 'dot') && <NewMsgDot />
            }
          </SideContent>
        </Content>
      </Root>
    );
  }
}

export default ChatConversationItem;
